

<html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    *{ margin:0; padding:0; font-size:14px}
    #box{ width:500px; margin:100px auto}
    table,th,td{ border:1px solid #000; border-collapse:collapse}
    td,th{ width:100px; height:30px; padding:10px}
    input[type="text"]{ display:none; height:24px; width:60px; border:1px solid #ccc;}
    tbody tr td:first-child{text-align: center;}
    tfoot td{text-align: right;}
    .editBtn{ color:#666}
    .delBtn{ color:red}
    .okBtn,.cancelBtn{ display:none}
    
    .edit span{ display:none}
    .edit input[type="text"]{ display:inline-block}
    .edit .editBtn,.edit .delBtn{ display:none}
    .edit .okBtn,.edit .cancelBtn{ display:inline}
    </style>
    
    </head>
    
    <body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th><label>全选：<input type="checkbox" id="allCheck"/></label></th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>编辑</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>张三</span><input type="text"></td>
                    <td><span>18</span><input type="text"></td>
                    <td><span>1</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a>
                    </td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>李四</span><input type="text"></td>
                    <td><span>25</span><input type="text"></td>
                    <td><span>2</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>小强</span><input type="text"></td>
                    <td><span>22</span><input type="text"></td>
                    <td><span>3</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>小明</span><input type="text"></td>
                    <td><span>16</span><input type="text"></td>
                    <td><span>4</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">总价：￥<b id="money"></b></td>
                </tr>
            </tfoot>
       </table>
    </div>
    
    <script>
      var editBtns = document.querySelectorAll('.editBtn')
      var okBtns = document.querySelectorAll('.okBtn')
      var cancelBtns = document.querySelectorAll('.cancelBtn')
      var delBtns = document.querySelectorAll('.delBtn')
      var allCheck = document.querySelector('#allCheck')
      var Checks = document.querySelectorAll('.check')
      var price = 0
      var n = 0
      var lastprice = 0
      var nextprice = 0
      var sum = document.querySelectorAll('tr').length - 2
      var money = document.querySelector('#money')
      Array.from(editBtns).forEach(function(item) {
            item.onclick = function() {
                var tr =this.parentElement.parentElement
                tr.className = 'edit'
                var spans = tr.querySelectorAll('span')
                lastprice = spans[1].innerHTML * spans[2].innerHTML
                for(var i = 0;i < spans.length; i++) {
                spans[i].nextElementSibling.value = spans[i].innerHTML;
            }
          }
      })
      Array.from(okBtns).forEach(function(item) {
          item.onclick = function() {
            var tr =this.parentElement.parentElement
            var inputs = tr.querySelectorAll('input')
            nextprice = inputs[2].value * inputs[3].value
            price = inputs[0].checked ? (price - lastprice + nextprice ) : price
            money.innerHTML = price
            tr.classList.remove('edit')
            var spans = tr.querySelectorAll('span')
            for(var i = 0;i < spans.length; i++) {
                spans[i].innerHTML = spans[i].nextElementSibling.value;
            }
          }
      }
      )
      Array.from(cancelBtns).forEach(function(item) {
          item.onclick = function() {
            var tr =this.parentElement.parentElement
            var inputs = tr.querySelectorAll('input')
            var spans = tr.querySelectorAll('span')
            // lastprice = spans[1].innerHTML * spans[2].innerHTML
            // console.log(lastprice)
            // price = inputs[0].checked ? (price - lastprice ) : price
            // money.innerHTML = price
            tr.classList.remove('edit')
          }
      })
      Array.from(delBtns).forEach(function(item) {
          item.onclick = function() {
            var tr =this.parentElement.parentElement
            var inputs = tr.querySelectorAll('input')
            var spans = tr.querySelectorAll('span')
            lastprice = spans[1].innerHTML * spans[2].innerHTML
            price = inputs[0].checked ? (price - lastprice ) : price
            money.innerHTML = price
            tr.remove()
          }
      })
      allCheck.onchange = function() {
          if (this.checked) {
              price = 0
              var tr = document.querySelectorAll('tr')
              for(var i = 1; i < tr.length - 1; i++) {
                  var td = tr[i].childNodes
                  price += td[5].querySelector('span').innerHTML * td[7].querySelector('span').innerHTML
              }
              n = tr.length - 2
              Array.from(Checks).forEach(function(item) {
                item.checked = true
            })
          }
          else {
            n = 0
            price = 0
            Array.from(Checks).forEach(function(item) {
                item.checked = false
            })
          }
          money.innerHTML = price
      }
      Array.from(Checks).forEach(function(item) {
          item.onchange = function() {
              var tr = this.parentNode.parentNode
              var td = tr.childNodes
              price += this.checked ? td[5].querySelector('span').innerHTML * td[7].querySelector('span').innerHTML : -(td[5].querySelector('span').innerHTML * td[7].querySelector('span').innerHTML)
              this.checked ? n++ : n--
              money.innerHTML = price
              if(n === sum) {
                allCheck.checked = true
              }
              else {
                  allCheck.checked = false
              }
          }
      })
    </script>
    </body>
    </html>
    